<template>
  <div class="approval-form-data">
    <div v-if="parsedFormData && Object.keys(parsedFormData).length > 0">
      <v-row>
        <v-col
          v-for="(value, key) in parsedFormData"
          :key="key"
          cols="12"
          :md="String(getColumnWidth(String(key), value))"
        >
          <v-text-field
            v-if="getFieldType(String(key), value) === 'text'"
            :label="getFieldLabel(String(key))"
            :model-value="formatValue(value)"
            readonly
            variant="outlined"
            density="compact"
          />
          
          <v-textarea
            v-else-if="getFieldType(String(key), value) === 'textarea'"
            :label="getFieldLabel(String(key))"
            :model-value="formatValue(value)"
            readonly
            variant="outlined"
            rows="3"
          />
          
          <v-switch
            v-else-if="getFieldType(String(key), value) === 'boolean'"
            :label="getFieldLabel(String(key))"
            :model-value="!!value"
            readonly
            inset
          />
          
          <v-chip-group
            v-else-if="getFieldType(String(key), value) === 'array'"
            class="form-array-field"
          >
            <span class="text-body-2 text-grey mb-2 d-block">{{ getFieldLabel(String(key)) }}:</span>
            <v-chip
              v-for="(item, index) in (value as any[])"
              :key="index"
              size="small"
              variant="tonal"
              color="primary"
            >
              {{ formatValue(item) }}
            </v-chip>
          </v-chip-group>
          
          <div v-else-if="getFieldType(String(key), value) === 'object'" class="object-field">
            <span class="text-body-2 text-grey mb-2 d-block">{{ getFieldLabel(String(key)) }}:</span>
            <v-card variant="outlined" class="pa-3">
              <pre class="object-content">{{ JSON.stringify(value, null, 2) }}</pre>
            </v-card>
          </div>
        </v-col>
      </v-row>
    </div>
    
    <!-- 无表单数据 -->
    <div v-else class="text-center py-6">
      <v-icon size="48" color="grey-lighten-1">mdi-form-select</v-icon>
      <div class="mt-2 text-body-2 text-grey">暂无表单数据</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

// Props
interface Props {
  formData: string | undefined;
}

const props = defineProps<Props>();

// 计算属性 - 解析表单数据
const parsedFormData = computed(() => {
  if (!props.formData) return null;
  
  try {
    return JSON.parse(props.formData);
  } catch (error) {
    console.error('解析表单数据失败:', error);
    return null;
  }
});

// 获取字段类型
function getFieldType(key: string, value: any): string {
  if (typeof value === 'boolean') {
    return 'boolean';
  }
  
  if (Array.isArray(value)) {
    return 'array';
  }
  
  if (typeof value === 'object' && value !== null) {
    return 'object';
  }
  
  if (typeof value === 'string' && value.length > 100) {
    return 'textarea';
  }
  
  return 'text';
}

// 获取字段标签
function getFieldLabel(key: string): string {
  // 字段名映射表
  const labelMap: Record<string, string> = {
    contractId: '合同编号',
    contractAmount: '合同金额',
    discountAmount: '优惠金额',
    lessonsNumber: '课时数',
    customerName: '客户姓名',
    studentName: '学生姓名',
    courseName: '课程名称',
    signDate: '签约日期',
    startDate: '生效日期',
    endDate: '失效日期',
    paymentMethod: '付款方式',
    payType: '付款类型',
    totalAmount: '总金额',
    freeLessons: '赠送课时',
    status: '状态',
    remark: '备注',
    reason: '原因',
    description: '描述',
    applicant: '申请人',
    department: '部门',
    email: '邮箱',
    phone: '电话',
    address: '地址',
    title: '标题',
    content: '内容',
    priority: '优先级',
    category: '分类',
    tags: '标签',
    attachments: '附件',
    createTime: '创建时间',
    updateTime: '更新时间',
  };
  
  return labelMap[key] || formatCamelCase(key);
}

// 将驼峰命名转换为中文友好的标签
function formatCamelCase(str: string): string {
  return str
    .replace(/([A-Z])/g, ' $1')
    .replace(/^./, str => str.toUpperCase())
    .trim();
}

// 格式化值
function formatValue(value: any): string {
  if (value === null || value === undefined) {
    return '-';
  }
  
  if (typeof value === 'boolean') {
    return value ? '是' : '否';
  }
  
  if (typeof value === 'number') {
    // 如果是金额相关字段，格式化为货币
    return value.toLocaleString();
  }
  
  if (typeof value === 'string') {
    // 检查是否是日期格式
    if (/^\d{4}-\d{2}-\d{2}/.test(value)) {
      try {
        const date = new Date(value);
        return date.toLocaleString('zh-CN');
      } catch {
        return value;
      }
    }
    return value;
  }
  
  return String(value);
}

// 获取列宽
function getColumnWidth(key: string, value: any): number {
  // 长文本字段占用全宽
  if (getFieldType(key, value) === 'textarea' || 
      getFieldType(key, value) === 'object' ||
      getFieldType(key, value) === 'array') {
    return 12;
  }
  
  // 其他字段占用半宽
  return 6;
}
</script>

<style scoped>
.approval-form-data {
  min-height: 200px;
}

.form-array-field {
  width: 100%;
}

.object-field {
  width: 100%;
}

.object-content {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: rgb(var(--v-theme-on-surface));
  background: transparent;
  border: none;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.v-switch {
  margin-top: 8px;
}
</style> 